<template>
  <el-dialog :title="editData ? '修改项目' : '添加项目'" :close-on-click-modal="false" :visible="true" v-model="data.show" width="600px" append-to-body>
    <el-form ref="dataRef" :model="form" :rules="data.rules" label-width="80px">
      <el-form-item label="项目名称" prop="projName">
          <el-input v-model="form.projName" placeholder="请输入项目名称" />
      </el-form-item>
      <el-form-item label="项目标识" prop="projKey">
          <el-input :disabled="!!editData" v-model="form.projKey" placeholder="请输入项目标识" />
      </el-form-item>
    </el-form>  
    <template #footer>
      <div class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" :disabled="data.loading" v-loading="data.loading" @click="submitForm">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
/**
 * 项目添加对话框组件
 * 功能：
 * - 提供新增项目的表单界面
 * - 表单字段验证
 * - 提交数据到后端API
 * - 处理操作结果反馈
 * - 与父组件通过事件通信
 */
import { ref, reactive, toRefs } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import * as projectAPI from '@/api/project'

const props = defineProps(['openKey', 'editData'])
const emit = defineEmits(['setMData'])
const router = useRouter();
const dataRef = ref(null);
const form = ref(props.editData ? ['id', 'projName', 'projKey'].reduce((a,b) => (a[b] = props.editData[b],a),{}) : {});
console.log(form)
// 组件状态管理
const data = reactive({
  // 表单验证规则
  rules: {
    projName: [{ required: true, message: "项目名称不能为空", trigger: "blur" }],
    projKey: [{ required: true, message: "项目标识不能为空", trigger: "blur" }]
  },
  // 对话框显示状态
  show: true,
  loading: false
})
/**
 * 提交表单数据
 * 处理表单验证和项目添加逻辑
 * 自动区分开发/生产环境
 */
async function submitForm() {
  dataRef.value.validate((valid) => {
    if (valid) {
      data.loading = true;
      let mform = {...form.value}
      mform.id &&(mform.projKey = undefined);
      projectAPI[!props.editData ? 'addProject' : 'updateProjectInfo'](mform).then(()=> {
        ElMessage.success(props.editData ? '修改成功' : '新增成功')
        cancel()
        // 直接触发刷新事件，不再跳转页面
        emit('setMData', 'refreshList', true)
      }).finally(()=>data.loading = false)
    }
  })
}

/**
 * 取消操作
 * 关闭对话框并通知父组件
 */
function cancel() {
  emit('setMData', props.openKey, false)
}
</script>
